"use client";

import { MainContext } from "@/src/providers/MainProvider";
import {
  Box,
  Container,
  Flex,
  Heading,
  Text,
  Switch,
  Select,
  Divider,
  useColorModeValue,
  Button,
  FormControl,
  FormLabel,
  Radio,
  RadioGroup,
  Stack,
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  Tooltip,
} from "@chakra-ui/react";
import { useContext, useState, useEffect } from "react";
import { motion } from "framer-motion";

const MotionBox = motion(Box);

function KBSetting() {
  const {
    t,
    connectedKeyboard,
    lockWin,
    setLockWin,
    lockAltF4,
    setLockAltF4,
    lockAltTab,
    setLockAltTab,
  } = useContext(MainContext);

  // 锁Win
  const HandleLockWin = async () => {
    const newLockWin = !lockWin;
    setLockWin(newLockWin ? 1 : 0);
    if (connectedKeyboard) {
      await connectedKeyboard.setLockWin(newLockWin);
    }
  };

  // 锁定Alt+F4
  const HandleLockAltF4 = async () => {
    const newLockAltF4 = !lockAltF4;
    setLockAltF4(newLockAltF4 ? 1 : 0);
    if (connectedKeyboard) {
      await connectedKeyboard.setLockAltF4(newLockAltF4);
    }
  };

  // 锁定Alt+Tab
  const HandleLockAltTab = async () => {
    const newLockAltTab = !lockAltTab;
    setLockAltTab(newLockAltTab ? 1 : 0);
    if (connectedKeyboard) {
      await connectedKeyboard.setLockAltTab(newLockAltTab);
    }
  };

  return (
    <Box p={8} minH="calc(100vh - 200px)">
      {/* 页面标题 */}
      <MotionBox
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        mb={8}
      >
        <Heading size="lg" color="rgb(15, 23, 42)" fontWeight="600" mb={2}>
          {t("1020")}
        </Heading>
        <Text color="rgb(100, 116, 139)" fontSize="md">
          {t("1021")}
        </Text>
      </MotionBox>

      {/* 设置卡片列表 */}
      <Stack spacing={6}>
        {/* Win键锁定设置 */}
        <MotionBox
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          borderRadius="16px"
          p={6}
          _hover={{
            boxShadow: "0 8px 32px rgba(255, 140, 0, 0.12)",
            transform: "translateY(-2px)",
          }}
          style={{
            background: "rgba(255, 255, 255, 0.5)",
            backdropFilter: "blur(20px)",
            WebkitBackdropFilter: "blur(20px)",
            border: "1px solid rgba(255, 140, 0, 0.2)",
            boxShadow: "0 4px 20px rgba(255, 140, 0, 0.08)",
            transition: "all 0.3s ease",
          }}
        >
          <Flex align="center" justify="space-between">
            <Box flex="1">
              <Text
                fontWeight="600"
                fontSize="lg"
                color="rgb(15, 23, 42)"
                mb={1}
              >
                {t("600")}
              </Text>
              <Text color="rgb(100, 116, 139)" fontSize="sm" lineHeight="1.5">
                {t("601")}
              </Text>
            </Box>
            <Box ml={6}>
              <Switch
                isChecked={lockWin == 1 ? true : false}
                onChange={HandleLockWin}
                size="lg"
                sx={{
                  ".chakra-switch__track": {
                    bg:
                      lockWin == 1 ? "rgb(255, 140, 0)" : "rgb(226, 232, 240)",
                    _checked: {
                      bg: "rgb(255, 140, 0)",
                    },
                  },
                  ".chakra-switch__thumb": {
                    bg: "white",
                    boxShadow: "0 2px 4px rgba(255, 140, 0, 0.2)",
                  },
                }}
              />
            </Box>
          </Flex>
        </MotionBox>

        {/* Alt+F4锁定设置 */}
        { false &&  <MotionBox
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          borderRadius="16px"
          p={6}
          _hover={{
            boxShadow: "0 8px 32px rgba(255, 140, 0, 0.12)",
            transform: "translateY(-2px)",
          }}
          style={{
            background: "rgba(255, 255, 255, 0.5)",
            backdropFilter: "blur(20px)",
            WebkitBackdropFilter: "blur(20px)",
            border: "1px solid rgba(255, 140, 0, 0.2)",
            boxShadow: "0 4px 20px rgba(255, 140, 0, 0.08)",
            transition: "all 0.3s ease",
          }}
        >
          <Flex align="center" justify="space-between">
            <Box flex="1">
              <Text
                fontWeight="600"
                fontSize="lg"
                color="rgb(15, 23, 42)"
                mb={1}
              >
                {t("1022")} Alt+F4
              </Text>
              <Text color="rgb(100, 116, 139)" fontSize="sm" lineHeight="1.5">
                {t("1023")}
              </Text>
            </Box>
            <Box ml={6}>
              <Switch
                isChecked={lockAltF4 == 1 ? true : false}
                onChange={HandleLockAltF4}
                size="lg"
                sx={{
                  ".chakra-switch__track": {
                    bg:
                      lockAltF4 == 1
                        ? "rgb(255, 140, 0)"
                        : "rgb(226, 232, 240)",
                    _checked: {
                      bg: "rgb(255, 140, 0)",
                    },
                  },
                  ".chakra-switch__thumb": {
                    bg: "white",
                    boxShadow: "0 2px 4px rgba(255, 140, 0, 0.2)",
                  },
                }}
              />
            </Box>
          </Flex>
        </MotionBox>}

        {/* Alt+Tab锁定设置 */}
        <MotionBox
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
          borderRadius="16px"
          p={6}
          _hover={{
            boxShadow: "0 8px 32px rgba(255, 140, 0, 0.12)",
            transform: "translateY(-2px)",
          }}
          style={{
            background: "rgba(255, 255, 255, 0.5)",
            backdropFilter: "blur(20px)",
            WebkitBackdropFilter: "blur(20px)",
            border: "1px solid rgba(255, 140, 0, 0.2)",
            boxShadow: "0 4px 20px rgba(255, 140, 0, 0.08)",
            transition: "all 0.3s ease",
          }}
        >
          <Flex align="center" justify="space-between">
            <Box flex="1">
              <Text
                fontWeight="600"
                fontSize="lg"
                color="rgb(15, 23, 42)"
                mb={1}
              >
                {t("1022")} Alt+Tab
              </Text>
              <Text color="rgb(100, 116, 139)" fontSize="sm" lineHeight="1.5">
                {t("1024")}
              </Text>
            </Box>
            <Box ml={6}>
              <Switch
                isChecked={lockAltTab == 1 ? true : false}
                onChange={HandleLockAltTab}
                size="lg"
                sx={{
                  ".chakra-switch__track": {
                    bg:
                      lockAltTab == 1
                        ? "rgb(255, 140, 0)"
                        : "rgb(226, 232, 240)",
                    _checked: {
                      bg: "rgb(255, 140, 0)",
                    },
                  },
                  ".chakra-switch__thumb": {
                    bg: "white",
                    boxShadow: "0 2px 4px rgba(255, 140, 0, 0.2)",
                  },
                }}
              />
            </Box>
          </Flex>
        </MotionBox>
      </Stack>
    </Box>
  );
}

export default KBSetting;
